import { Input } from "antd"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"
import { onlyPositiveNumber } from "@/utils/validate"

interface ClubIdInputProps {
	isHideLabel?: boolean
	placeholder?: string
	onChange?: (text: string) => void
}

const ClubIdInput: FC<ClubIdInputProps> = ({ isHideLabel = false, placeholder, onChange }) => {
	const { newFormat } = useLocale()
	const onNotAllow = (value: string) => {
		onChange && onChange(value)
	}

	return (
		<SFormItem name="clubId" label={isHideLabel ? "" : newFormat("dxn.card_ables_list.club_id")}>
			<Input
				placeholder={placeholder || newFormat("common.please_enter")}
				allowClear
				onChange={e => onlyPositiveNumber(e, onNotAllow)}
			/>
		</SFormItem>
	)
}

export default ClubIdInput
